import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
Card, Button, // Table,
// Row,
//  Col,
// Input,
// message,
// Modal,
// Tabs,
// Timeline,
// Icon,
Divider
} from 'antd';
import router from 'umi/router';
import { connect } from 'dva';
import moment from 'moment';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';

const { Description } = DescriptionList;
// import ProDetail from '../../components/ProDetail';
// import Link from 'umi/link';
// import ProFbList from '../../components/ProFbList';
// const TabPane = Tabs.TabPane;
// const { confirm } = Modal;
// const FormItem = Form.Item;
// const { TextArea } = Input;

@connect(({ loading, adjustdetail: { getPersonDetailData } }) => ({
  getPersonDetailData,
  loading: loading.models.adjustdetail,
}))
@Form.create()
class Problem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // maistrue: false,
      // allData: false,
      // lcontRecDto: false,
      // adjType: '',
    };
  }

  componentDidMount() {
    this.getDetail();
  }

  // 详情
  getDetail = () => {
    const { dispatch, location } = this.props;
    const { adjTaskId } = location.query;
    // this.setState({
    //   adjType,
    // });

    dispatch({
      type: 'adjustdetail/fetchPersonChargeDetail',
      payload: { adjId: adjTaskId },
    });
  };

  render() {
    const { getPersonDetailData } = this.props;
    const { updateBaseInfo, updateCostGenter, updatePdAmo } = getPersonDetailData;
    return (
      <PageHeaderWrapper>
        <Card title={<h4 style={{ fontWeight: 900 }}>派单信息</h4>}>
          <Form>
            <DescriptionList>
              <Description term="签约方">
                {updateBaseInfo.senderName ? updateBaseInfo.senderName : '--'}
              </Description>
              <Description term="客户名称">
                {updateBaseInfo.custName ? updateBaseInfo.custName : '--'}
              </Description>
              <Description term="商务合同">
                {updateBaseInfo.custContName ? updateBaseInfo.custContName : '--'}
              </Description>
              <Description term="报价单">
                {updateBaseInfo.quoName ? updateBaseInfo.quoName : '--'}
              </Description>
              <Description term="派单时间">
                {updateBaseInfo.sendDate
                  ? moment(updateBaseInfo.sendDate).format('YYYY-MM-DD HH:mm')
                  : '--'}
              </Description>
            </DescriptionList>
          </Form>
        </Card>
        <Card
          title={
            <div style={{ position: 'relative' }}>
              <h4 style={{ fontWeight: 900 }}>修改内容</h4>
              <p style={{ position: 'absolute', top: '0', right: '0', fontSize: 14 }}>
                <span style={{ margin: '0 40px 0 0' }}>操作人：{updateBaseInfo.operName}</span>
                <span>
                  操作时间：
                  {updateBaseInfo.operTime
                    ? moment(updateBaseInfo.operTime).format('YYYY-MM-DD HH:mm')
                    : '--'}
                </span>
              </p>
            </div>
          }
        >
          <h4 style={{ fontWeight: 900 }}>基本信息</h4>
          <DescriptionList>
            <Description term="姓名">
              {updateBaseInfo.empName ? updateBaseInfo.empName : '--'}
            </Description>
            <Description term="证件类型">
              {updateBaseInfo.idTypeName ? updateBaseInfo.idTypeName : '--'}
            </Description>
            <Description term="证件号">{updateBaseInfo ? updateBaseInfo.idCode : '--'}</Description>
            <Description term="国籍">
              {updateBaseInfo.nationName ? updateBaseInfo.nationName : '--'}
            </Description>
            <Description term="出生日期">
              {updateBaseInfo.birthDate
                ? moment(updateBaseInfo.birthDate).format('YYYY-MM-DD')
                : '--'}
            </Description>
            <Description term="性别">
              {updateBaseInfo.genderName ? updateBaseInfo.genderName : '--'}
            </Description>
            <Description term="电话">
              {updateBaseInfo.mobile ? updateBaseInfo.mobile : '--'}
            </Description>
            <Description term="员工邮箱">
              {updateBaseInfo.email ? updateBaseInfo.email : '--'}
            </Description>
            <Description term="入职日期">
              {updateBaseInfo.entryDate
                ? moment(updateBaseInfo.entryDate).format('YYYY-MM-DD')
                : '--'}
            </Description>
          </DescriptionList>
          {/* <div style={{ borderBottom: '1px solid #ccc', margin: '20px 0' }} /> */}
          <Divider />
          <h4 style={{ fontWeight: 900 }}>成本中心</h4>
          <DescriptionList style={{ margin: '0 0 0 10px' }}>
            <Description term="成本中心">
              {updateCostGenter.costCenterName ? updateCostGenter.costCenterName : '--'}
            </Description>
          </DescriptionList>
          {/* <div style={{ borderBottom: '1px solid #ccc', margin: '20px 0' }} /> */}
          <Divider />
          <h4 style={{ fontWeight: 900 }}>服务费</h4>

          <div>
            {updatePdAmo.map(item => (
              <Card style={{ marginBottom: 10 }}>
                {item.updatePdPackInfoList.map(c => (
                  <DescriptionList style={{ marginBottom: 24 }}>
                    <Description term="产品名称">{c.pdName ? c.pdName : '--'}</Description>
                    <Description term="缴费方式">{c.payWayName ? c.payWayName : '--'}</Description>
                    {c.assName && (
                      <Description term="缴费险种">{c.assName ? c.assName : '--'}</Description>
                    )}
                  </DescriptionList>
                ))}
                <Divider dashed="true" />
                <DescriptionList style={{ marginBottom: 24 }}>
                  <Description term="报价金额">
                    <span>{item.quoAmo ? item.quoAmo.toFixed(2) : '--'}</span>
                  </Description>
                  <Description term="税金">
                    {item.taxAmo ? item.taxAmo.toFixed(2) : '--'}
                    <span style={{ marginLeft: 18 }}>
                      ( 税率：
                      {item.taxRate ? `${item.taxRate}%` : '-- '})
                    </span>
                  </Description>
                </DescriptionList>
              </Card>
            ))}
          </div>
        </Card>

        <FooterToolbar style={{ width: '100%' }}>
          {/* <Link to={`/customservicemanage/AdjustTask/index`}> */}
          <Button style={{ marginRight: 10 }} onClick={() => router.goBack()}>
            关闭
          </Button>
          {/* </Link> */}
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}

export default Problem;
